<template>
    <div class="admin">
        <div class="msglogin">
        <h2 class="tit">后台管理系统</h2>
        <div class="msgfrom">
            <form action="">
               <p> 账号：<input type="text" name="mname" v-model="mname"/></p>
               <p>密码：<input type="password" name="mpwd" v-model="mpwd"/></p>
               <p class="Verifi">验证：<input v-model="picLyanzhengma" @blur="checkLpicma"/>
               <!-- <span></span> -->
                <span @click="createCode">{{checkCode}}</span>
               </p>
               <p class="tologin"><button type="submit" @click.prevent="sub">登　录</button>
               <button type="reset" class="reset">重　置</button></p>
            </form>
            <transition
         leave-active-class="animated fadeOutDown">
            <span class="show" v-if="show" >
                {{msg}}
                </span></transition>
                <transition
         leave-active-class="animated fadeOutDown">
            <span class="show1" v-if="show1">
                {{msg1}}
                </span></transition>
        </div>
    </div>
    </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex";
export default {
data () {
    return {
        checkCode:"",
        picLyanzhengma:"",
        mname:"",
        mpwd:"",
        judage:false,
        msg:"",
        show:false,
        msg1:"",
        show1:false
    }
},
computed: {
    ...mapState(["currentadmin","msglogin"])
},
mounted () {
      let code = ""; 
      var codeLength = 4;//验证码的长度 
      var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 
         'S','T','U','V','W','X','Y','Z');
      for(var i = 0; i < codeLength; i++) {
       var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 
       code += random[index];//根据索引取得随机数加到code上 
      } 
      this.checkCode = code;//把code值赋给验证码 
},
methods: {
    sub()
    {
       
      this.$axios.post("http://127.0.0.1:8081/admin/login",{
      a_name:this.mname,
      a_pwd:this.mpwd
    }).then(res=>{
        console.log(res);
        if(this.judage===true)
        {
            if(res.data.status==1)
            {
                console.log(res.data.msg);
                this.show1=false;
                sessionStorage.setItem("adminname",this.mname);
                this.setadmin(this.mname);
                console.log(this.currentadmin,this.msglogin);
                  this.$router.push({path:"/admin/index/home",query:{name:this.mname}})
            }
            else{
                this.msg1=res.data.msg;
                this.show1=true;
            }
        }
        else{
        }
        if(this.show1==true)
         {
             let that=this;
            //  console.log(this.show)
            setTimeout(function (){
                that.show1=false;
                }, 2000);
         }
      
    });
    },
    //点击生成验证码
     createCode(){
     let code = ""; 
      var codeLength = 4;//验证码的长度 
      var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 
         'S','T','U','V','W','X','Y','Z');
      for(var i = 0; i < codeLength; i++) {
       var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 
       code += random[index];//根据索引取得随机数加到code上 
      } 
      this.checkCode = code;//把code值赋给验证码 
    },
    //对验证码进行验证
     checkLpicma(){ 
      this.picLyanzhengma.toUpperCase();//取得输入的验证码并转化为大写   
      if(this.picLyanzhengma == '') {
      this.msg="请输入验证码";
       this.judage=false;
      }else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) { 
       this.msg="验证码错误";
       this.judage=false;
       this.createCode();//刷新验证码 
       this.picLyanzhengma = '';
      }else {
       //输入正确时 
         this.msg="";
        console.log("验证码正确")
        this.judage=true;
      } 
        this.show=this.msg.length>0?true:false;
        if(this.show==true)
         {
             let that=this;
            //  console.log(this.show)
            setTimeout(function (){
                that.show=false;
                }, 1000);
         }
    },
    ...mapActions(["setadmin"])
},

filters: {
    
  
}
}
</script>

<style>
.admin{
    width: 100%;
    height: 100%;
    background: url("../../../../assets/images/msg_bg.jpg") no-repeat center;
    background-size: 100%;
}
.msglogin{
   
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    
}
.tit{
 text-align: center;
 margin-bottom:20px;
 color :#fff;
 text-shadow:3px -3px 6px #666;    
}
.msgfrom{ 
    background: rgba(255, 255, 255, .3);
    width: 350px;
   height: 300px;
   padding:20px 40px;
   box-sizing:border-box;
   color: #fff;
    border: 6px solid rgba(255, 255, 255, .3);
    border-radius:10px; 
}
.msglogin p{
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;  
    margin: 10px 0;
}
.msglogin input{
      box-sizing:border-box;
    border: none;
    height: 30px;
    /* border: 1px solid rgb(243, 92, 92); */
    border-radius: 5px;
    width: 200px;
    background: rgba(255, 255, 255, .8);
    color: rgb(63, 210, 247);
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold
}
.tologin{
    text-align: center
}
.tologin button{
    width: 80px;
    border: none;
    height: 35px;
    border-radius: 5px;
    background:  rgb(255, 113, 31);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}
.tologin .reset{
    margin-left: 30px
}
.msglogin .Verifi input{
width: 100px
}
.Verifi span{
    display: inline-block;
    margin-left: 20px;
    width: 80px;
    height: 30px;
    background: #fff;
    color: rgb(255, 113, 31);
    line-height: 30px;
    text-align: center;
    letter-spacing:8px;
}
.show,.show1{
    position: absolute;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}
.show{
    top:248px;
    left:120px;
    width: 100px;
}
.show1{
top:150px;left: 120px;
width: 150px;
}
</style>
